<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="top">
        <view class="cname-box">
          <view class="cname">{{ itemList.customerName || '-' }}</view>
          <view class="cname-fu-box">
            <view class="cname-fu">
              <view class="gs">{{ itemList.proName || '-' }}</view>
            </view>
            <view class="line"></view>
            <view class="cname-fu">
              <view class="mz">{{ itemList.vehicleNo || '-' }}</view>
            </view>
          </view>
        </view>
        <view class="status" :class="{
          'orange-type': itemList.waybillStatus === 0,
          'blue-type': itemList.waybillStatus === 1,
          'purple-type': itemList.waybillStatus === 2,
          'cyan-type': itemList.waybillStatus === 3,
          'red-orange-type': itemList.waybillStatus === 4,
          'red-purple-type': itemList.waybillStatus === 5,
          'green-type': itemList.waybillStatus === 6,
          'red-type': itemList.waybillStatus === 7,
          'gray-type': itemList.waybillStatus===8
          }">
          {{ statusName[itemList.waybillStatus] }}</view>
      </view>
      <view class="bottom" style="margin-top: 20rpx" v-if="orgNameShow">
        <view class="items">
          <text class="til">所属组织</text>
          <text class="val">{{ itemList.organizationName || '' }}</text>
        </view>
      </view>
      <view class="bottom" :style=" orgNameShow ? '' : 'margin-top: 20rpx;'">
        <view class="items">
          <text class="til">承运单位</text>
          <text class="val">{{ itemList.cusTransport || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">姓名</text>
          <text class="val">{{ itemList.driverName || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">电话</text>
          <text class="val">{{ itemList.driverMobile || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">接单时间</text>
          <text class="val">{{itemList.createTime ? getDateFormatString(itemList.createTime): '-'}}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">重磅时间</text>
          <text class="val">{{itemList.grossTime ? getDateFormatString(itemList.grossTime) : '-'}}</text>
        </view>
      </view>
      <view class="weight-row">
        <view>
          <view>毛重</view>
          <text>{{itemList.grossWeight || '-'}}</text>
        </view>
        <view>
          <view>皮重</view>
          <text>{{itemList.netWeight || '-'}}</text>
        </view>
        <view>
          <view>净重</view>
          <text>{{itemList.totalWeight || '-'}}</text>
        </view>
      </view>
      <view class="price-row">
        <view>
          <view>单价</view>
          <text>{{itemList.endPrice != null || itemList.endPrice != undefined ? itemList.endPrice : '-'}}</text>
        </view>
        <view style="margin-left: 10px;">
          <view>总价</view>
          <text>{{itemList.priceTotal != null || itemList.priceTotal != undefined ? itemList.priceTotal : '-'}}</text>
        </view>
      </view>
      <view class="button-wrapper">
        <view class="bottom-btn">
          <button v-if="itemList.cancelBtn && confirmCancel" class="cancelBtn small" size="mini"
            @click.stop="cancel(itemList)">取消</button>
          <button v-if="itemList.waybillStatus===0 && confirmAudit" class="cancelBtn small" size="mini" type="primary"
            @click.stop="openExamine(itemList)">确认审核</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getDateFormat } from '@/utils/common.js';
  export default {
    name: 'sale-waybill',
    props: {
      itemList: {
        type: Object,
        default: {}
      },
      confirmAudit: {
        type: Boolean,
        default: false
      },
      confirmCancel: {
        type: Boolean,
        default: false
      },
      orgNameShow: {
        type: Boolean,
        default: false
      },
    },
    computed: {
      getDateFormatString() {
        return (value) => {
          return getDateFormat(value)
        }
      }
    },
    data() {
      return {
        statusName: {
          0: '待审核',
          1: '待入场',
          2: '待录皮',
          3: '待装煤',
          4: '待称毛',
          5: '待出厂',
          6: '已完成',
          7: '已作废',
          8: '已终止'
        }
      };
    },
    methods: {
      goToDetail(item) {
        this.$emit('goToDetail', item);
      },
      cancel(item) {
        uni.showModal({
          title: '取消',
          content: '您确认取消运单吗？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              const data = { id: item.id }
              if ([1, 2, 3, 4].includes(item.waybillStatus)) {
                data['status'] = 8
              }
              this.$emit('cancelWaybill', data);
            }
          }
        })
      },
      openExamine(item) {
        this.$emit('confirmExamine', item);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .top .status {
    min-width: 58px;
    margin-left: 10px;
  }

  .button-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  .bottom-btn {
    text-align: right;
    border-top: 1px solid #e8e7e7;
    padding-top: 10px;
    margin-left: 10px;
    width: 100%;

    button {
      margin-left: 10rpx;
    }
  }

  .weight-row {
    display: flex;
    border-radius: 4px;
    margin: 10px 0;
    background: #f1f2f5;

    >view {
      flex: 1;
      height: 40px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      >view {
        font-size: 12px;
        color: #999999;
      }

      >text {
        margin-top: 2px;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }

  .price-row {
    display: flex;
    margin-bottom: 10px;

    >view {
      flex: 1;
      height: 46px;
      display: flex;
      align-items: center;
      background: #f1f2f5;
      flex-direction: column;
      justify-content: center;

      >view {
        font-size: 12px;
        color: #999999;
      }

      >text {
        margin-top: 4px;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
</style>